<template>
  <div class="box">
    <span class="reduce" @click="reduceNum">-</span>
    <span>{{ inputNum }}</span>
    <span class="add" @click="addNum">+</span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
  },
  data() {
    return {
      inputNum: 0,
    };
  },
  created() {
    this.inputNum = this.value;
  },
  methods: {
    reduceNum() {
      if (this.inputNum > this.min) {
        this.inputNum--;
      }
      this.$emit("change", this.inputNum);
    },
    addNum() {
      if (this.inputNum < this.max) {
        this.inputNum++;
      }
      this.$emit("change", this.inputNum);
    },
  },
};
</script>

<style lang="scss" scoped>
.reduce,
.add {
  text-align: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.box {
  display: flex;
}
</style>
